<template>
  <div class="home">
    <eleTable
        ref="ele"
        @tabList="tabList"
        :api="api"
        :table-data="tableData"
        :query="query"
        :config="config"
        :cellStyle="rowClass"
        :tableLabel="tableLabel">
      <template slot="search">
        <eleForm :form="query" :form-label="formLabel" labelPosition="left" inline labelWidth="50px">
          <template slot="button">
            <el-button type="primary">重置</el-button>
          </template>
        </eleForm>
      </template>
      <!-- 状态 -->
      <template slot="status" slot-scope="scope">
        <el-switch v-model="scope.row.status"  active-color="#13ce66"  inactive-color="#ff4949"/>
      </template>
      <template slot="edit" slot-scope="scope">
        <el-button type="text" @click="edit(scope.row)">编辑</el-button>
      </template>
    </eleTable>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import eleTable from '../package/elementTable/elementTable.vue'
import eleForm from '../package/elementForm/elementForm.vue'
// import axios from "axios";
export default Vue.extend({
  name: 'Home',
  components: { eleTable, eleForm },
  data(){
    return{
      config:{
        size: 'mini',
        height: null,
        stripe: true,
        border: true,
        fit: true,
        'max-height': null,
        'show-header': true,
        'current-row-key': 2
        // type: null
      },
      api: {
        url: '/list/table',
        // url: '/marketplatform/api/sysActivity/activityList',
        // url: 'list.table',
        // url: 'list.table',
        method: 'post',
        // token: '850ee157-363a-4f76-8e93-111187159dd7'
      },
      tableData: [],
      tableLabel: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'sex', label: '性别' },
        { prop: 'email', label: '邮箱' },
        { prop: 'msg', label: '文本' },
        { prop: 'status', label: '状态', template: true },
        // { prop: 'activityName', label: '姓名' },
        // { prop: 'activityImg', label: '地址' },
        // { prop: 'activityStatus', label: '状态' },
      ],
      query: {
        pageNumber: 1,
        pageSize: 10,
        name: '',
        status: null,
        // activityName: "",
        // status: null,
        // actId: null,
        // activityType: null,
        // date: [],
        // deptId: null,
        // endTime: "",
        // orderBy: "",
        // orderDirection: "",
        // startTime: "",
      },
      formLabel: [
        { prop: 'name', label: '姓名', type: 'input', clearable: true,  },
        {
          prop: 'status',
          label: '状态',
          type: 'option',
          option: [
            { value: null, label: '全部' },
            { value: 1, label: '开启' },
            { value: 0, label: '关闭' }
          ]
        },
      ]
    }
  },
  methods:{
    rowClass() {
      return 'height: 30px'
    },
    funAjax(ax) {
      // ax.headers['Authorization'] = `Bearer22 ${this.api.token}`
    },
    tabList(res, query){
      console.log(res)
      // console.log(res, query, conf)
      // this.$api('list.act', query).then(res =>{
      //   // console.log(res)
      //   this.tableData = res.data.page.records
      //   query.total = res.data.page.total
      //   conf.loading = false
      // })

      // console.log(res)
      // this.tableData = res.data.page.records
      // query.total = res.data.page.total

      // console.log(query)
      let data = res.data.page
      data.forEach(item => {
        item.status === 1 ? item.status =  true : item.status = false
        item.sex === 1 ? item.sex =  '男' : item.sex = '女'
      })
      this.tableData = res.data.page
      query.total = res.data.total
    },
    edit(val){
      console.log(  val )
      const h = this.$createElement;
      this.$notify({
        position: 'top-left',
        showClose: false,
        message: h('i', { style: 'color: #202124' }, `${ val.name } ${ val.age }  ${ val.email }`)
      });
    },
    search(){
      this.$refs['ele'].reset()
    },
  }
});
</script>
